<template>
	<view class="container999" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
		<view class='nav'>
			<!-- 导航栏 agents导航栏标题 -->
			<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
		</view>
		<view class="order-help" @tap="goQuestionDetail(28)">
			<view class="help-text">下单后看不到订单怎么办？</view>
			<image src="../../static/common/icon-turn.png" class="icon-turn"></image>
		</view>
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper class="swiper-block" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(listItem,listIndex) in list" :key="listIndex">
				<scroll-view class="scroll-block"
					scroll-y="true"
					@scrolltolower="lower1"
					scroll-with-animation 
					:scroll-into-view="toView">
					<view class='content' v-if="listItem.length>0">
						<!-- <systemCoin></systemCoin>
						<orderMe></orderMe> -->
						<orderFriend  v-for="(item,index) in listItem" :key="index" :itemdetail="item"></orderFriend>
						<!-- <orderFriend v-if="listIndex ==0" v-for="(item,index) in wList" :key="index" :itemdetail="item"></orderFriend> -->
					</view>
					
						<image src="../../static/common/nodata-sub.png" class='nodata' v-else></image>
					
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
const util = require('../../util/util.js');
import refresh from '../../components/order/refresh.vue';
import navTab from '../../components/order/navTab.vue';
import tabBar4 from '../../components/order/tabBar4.vue';

import systemCoin from'../../components/order/system-coin.vue';
import orderMe from'../../components/order/order-me.vue';
import orderFriend from'../../components/order/order-friend.vue';

import { myMixins } from '../../common/mixins.js'
export default {
	components: {refresh,navTab,tabBar4,systemCoin,orderMe,orderFriend},
	mixins:[ myMixins ],
	data() {
		return {
			currentPage:'index',
			toView:'',//回到顶部id
			tabTitle:['未结算','已结算','失效'], //导航栏格式 --导航栏组件
			currentTab: 0, //sweiper所在页
			pages:[1,1,1], //第几个swiper的第几页
			list: [], //数据格式
			wList:"",//订单列表
			YList:"",
			SList:"",
			pageIndex:1,
			// apptoken:"",
			is_pay:""
		};
	},
	onLoad(e) {
		
		// this.apptoken = uni.getStorageSync("apptoken");
		//获取订单列表
		//未结算订单：is_pay值为0,已结算订单：is_pay值为1，失效订单：tk_status值为13，
		if(uni.getStorageSync('apptoken')){
			this.GETLIST();
		}
		
		
		 
	},
	onShow() {
		//if(!this.checkLoginStatus()){
		if(!uni.getStorageSync('apptoken')){
			uni.navigateTo({
				url:'../login/login?type=1',
				animationType:'slide-in-bottom',
			})
			return;
		}
	},
	methods: {
		async GETLIST(){
			const _this = this;
			await this.getOrderList(0).then(res =>{
				_this.list.push(res);
				_this.getOrderList(1).then(res =>{
					_this.list.push(res);
					_this.getOrderList(13).then(res =>{
						_this.list.push(res);
						console.log(_this.list)
					})
				})
			})
		},
		async getOrderList(is_pay){
			//订单列表
			const _this = this;
			return new Promise(resolve => {
				uni.request({
					url:this.$API.URL + this.$API.OrderList,
					data:{
						apptoken:this.apptoken,
						is_pay:is_pay,
						pageIndex:this.pageIndex
					},
					success(res) {
						console.log(res)
						if(res.data.success){
							 //_this.list.push(res.data.data)
							resolve(res.data.data);
							
						}
					}
				})
			})
		},
		//问题详情
		goQuestionDetail(id){
			uni.navigateTo({
				url:'../newDriver/questionDetail?id='+ id,
				animationType:'slide-in-right'
			})
		},
		toTop(){
			this.toView = ''
			setTimeout(()=>{
				this.toView = 'top' + this.currentTab
			},10)
		},
		changeTab(index){
			this.currentTab = index;
		},
		// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
		isRequest(type) {
			return new Promise((resolve, reject) => {
				if(type=="loadmore"){
					this.pages[this.currentTab]++
				}
				
				var _this = this;
				const is_pay ="";
				if(this.currentTab == 1){
					is_pay = 0;
				}else if(this.currentTab == 2){
					is_pay = 1;
				}else if(this.currentTab ==3){
					is_pay = 13;
				}
				setTimeout(() => {
					uni.hideLoading()
					// uni.showToast({
					// 	icon: 'none',
					// 	title: `请求第${that.currentTab + 1 }个导航栏的第${that.pages[that.currentTab]}页数据成功`
					// })
					// console.log(`请求第${that.currentTab + 1 }个导航栏的第${that.pages[that.currentTab]}页数据成功`)
					// let newData = ['新数据1','新数据2','新数据3']
					// resolve(newData)
					
					
					uni.request({
						url:_this.$API.URL + _this.$API.OrderList,
						data:{
							apptoken:_this.apptoken,
							is_pay:is_pay,
							pageIndex:_this.pages[_this.currentTab]
						},
						success(res) {
							console.log(res)
							if(res.data.success){
								//_this.list.push(res.data.data)
								resolve(res.data.data)
							}
						}
					})
				}, 1000)
			})
		},
		// swiper 滑动
		swiperTab: function(e) {
			var index = e.detail.current //获取索引
			
			this.$refs.navTab.longClick(index);
			
			//this.getOrderList()
		},
		// 加载更多 util.throttle为防抖函数
		lower1: util.throttle(function(e) {
			console.log(`加载${this.currentTab}`)//currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
			uni.showLoading({
				title: '加载中',
				mask:true
			})
			this.isRequest('loadmore').then((res)=>{
				let tempList = this.list
				tempList[this.currentTab] = tempList[this.currentTab].concat(res)
				console.log(tempList)
				this.list = tempList
				this.$forceUpdate() //二维数组，开启强制渲染
			})
		}, 300),
		// 刷新touch监听
		refreshStart(e) {
			this.$refs.refresh.refreshStart(e);
		},
		refreshMove(e){
			this.$refs.refresh.refreshMove(e);
		},
		refreshEnd(e) {
			this.$refs.refresh.refreshEnd(e);
		},
		isRefresh(){
			console.log(this.currentTab);
			this.isRequest().then((res)=>{
				
				// let tempList = this.list
				// tempList[this.currentTab] = res
				// console.log(tempList)
				this.list[this.currentTab] = res
				this.$forceUpdate() //二维数组，开启强制渲染
				//console.log(JSON.stringify(res))
			})
				setTimeout(() => {
					uni.showToast({
						icon: 'success',
						title: '刷新成功'
					})
					this.$refs.refresh.endAfter() //刷新结束调用
				}, 1000)
		}
	}
};
</script>

<style>
		@import url("order.css");
		.nodata{
			width: 161upx;
			height: 161upx;
			margin: 100upx 50%;
			transform: translateX(-50%);
		}
</style>
